<template>
  <div class="userdata">
    <head_>
      <h1 style="width: 150px">完善资料</h1>
    </head_>

    <div class="inp">
      <label for="username">账号用户名</label>
      <input type="text" placeholder="请输入账号用户名" id="username" v-model="userdata.username" :disabled="true" />
    </div>
    <div class="inp">
      <label for="name">真实姓名</label>
      <input type="text" placeholder="请输入真实姓名" id="name" v-model="userdata.name" />
    </div>
    <div class="inp">
      <label for="sex">性别</label>
      <select name="sex" v-model="userdata.sex">
        <option value="0">男</option>
        <option value="1">女</option>
        <option value="2">未知</option>
      </select>
    </div>
    <div class="inp">
      <label for="licenseNo">驾照号码</label>
      <input type="text" placeholder="请输入12位驾照号码" id="licenseNo" v-model="userdata.licenseNo" />
    </div>
    <div class="inp">
      <label for="idType">证件类型</label>
      <select name="idType" v-model="userdata.idType">
        <option value="0">驾照</option>
        <option value="1">居民身份证</option>
        <option value="2">护照</option>
        <option value="3">军官证</option>
      </select>
    </div>
    <div class="inp">
      <label for="idCode">身份证号</label>
      <input type="text" placeholder="请输入身份证号码" id="idCode" v-model="userdata.idCode" />
    </div>

    <div class="inp">
      <label for="pathFront">身份证正面</label>
      <van-uploader  multiple :max-count="1" :after-read="afterRead" preview-size="100" style="margin: 0 auto" >
        <van-image width="150"  height="80" :src="userdata.pathFront"    />
      </van-uploader>
    </div>
    <div class="inp">
      <label for="pathReverse">身份证反面</label>
      <van-uploader  multiple :max-count="1" :after-read="afterRead1" preview-size="100" style="margin: 0 auto" >
      <van-image width="150"  height="80" :src="userdata.pathReverse"    />
      </van-uploader>
    </div>
    <div class="inp">
      <label for="contactName">联系姓名</label>
      <input type="text" placeholder="请输入家人联系人名称" id="contactName" v-model="userdata.contactName" />
    </div>
    <div class="inp">
      <label for="contactPhone">联系电话</label>
      <input type="text" placeholder="请输入家人联系人电话" id="contactPhone" v-model="userdata.contactPhone" />
    </div>
    <div class="inp">
      <label for="contactAddress">联系地址</label>
      <input type="text" placeholder="请输入家人联系人地址" id="name" v-model="userdata.contactAddress" />
    </div>
    <div class="inp">
      <label for="phoneNum">手机号</label>
      <input type="text" placeholder="请输入本人手机号" id="phoneNum" v-model="userdata.phoneNum" />
    </div>
    <div class="inp">
      <label for="email">邮箱</label>
      <input type="text" placeholder="请输入邮箱" id="email" v-model="userdata.email" />
    </div>
    <div class="submit">
      <button
        @click="submit"
        :disabled="submitdisplay"
        :class="[submitcolor ===true ? 'submit_active' : '']"
      >提交</button>
    </div>
  </div>
</template> 

<script>
//导入请求
import head_ from "../jingtai_/header";
import {uploadImg, userdataFun} from "../../request/userinfo/userinfo";
export default {
  props: {},
  data() {
    return {
      userdata: {},//表中数据显示
      idrepw: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}(\d|x|X)$/, //身份证
      of: /^[0-9]{8}$/, //军官证
      passport: /^[a-zA-Z0-9]{5,17}$/, //护照
      licenseNorepw: /^\d{12}$/, //驾照
      emailrepw: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,//email

      submitdisplay: true,
      submitcolor: false,
      regphone: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,//手机号
      regpw: /^[\w]{6,16}$/,
      bool: true,

    };
  },

  created() {
    this.userdata = this.$store.state.user;
    console.log(this.userdata)
    if (this.$store.state.user.idCard) {
      let idCard = this.userdata.idCard;
      this.userdata.idCard =
        idCard.substr(0, 5) + "******" + idCard.substr(-3);
    }     
  },
  methods: {

    eye_active() {
      this.flas = !this.flas;
    },

    eye_active2() {
      this.flas2 = !this.flas2;
    },

    // 表单验证
    submit() {
     if (this.emailrepw.test(this.userdata.email) === false) {
        this.$toast.fail("请输入正确的邮箱格式");
      } else  if (this.licenseNorepw.test(this.userdata.licenseNo) === false) {
       this.$toast.fail("请输入正确的驾照号");
     }else if(this.regphone.test(this.userdata.phoneNum)===false){
       this.$toast.fail("请输入正确的手机号")
     }else if(this.regphone.test(this.userdata.contactPhone)===false){this.$toast.fail("请输入正确的联系手机号")
     }else {
          userdataFun({
            username:this.userdata.username,
            name:this.userdata.name,
            sex:this.userdata.sex,
            licenseNo:this.userdata.licenseNo,
            idType:this.userdata.idType,
            idCode:this.userdata.idCode,
            contactAddress:this.userdata.contactAddress,
            email:this.userdata.email,
            contactName:this.userdata.contactName,
            contactPhone:this.userdata.contactPhone,
            phoneNum:this.userdata.phoneNum,
            pathFront:this.userdata.pathFront,
            pathReverse:this.userdata.pathReverse
          }).then((res) => {
            if (res.code === 2000) {
              this.$toast.success({
                message: "完善资料成功",
                duration: 2000,
                onClose: (res) => {
                  return this.$router.push("/banner");
                },
              });
            }
          });
      }
    },

    //点击正面身份证触发的时间
    afterRead(file){
      console.log(file)
      let data = new FormData();
      data.append("file", file.file);
      uploadImg(data).then((res) => {
        if (res.code === 2000) {
          console.log(res)
          this.userdata.pathFront=res.data
          console.log(this.userdata.pathFront)
          this.$toast.fail("成功上传");
        } else {
          alert(res.message);
        }
      });
    },
    //点击反面身份证触发的时间
    afterRead1(file){
      let data = new FormData();
      data.append("file", file.file);
      uploadImg(data).then((res) => {
        if (res.code === 2000) {
          console.log(res)
          this.userdata.pathReverse=res.data
          console.log(this.userdata.pathReverse)
          this.$toast.fail("成功上传");
        } else {
          alert(res.message);
        }
      });
    }
  },




  updated() {
    if (this.name !== "" && this.username !== "" && this.licenseNo !== "") {
      this.submitdisplay = false;
      this.submitcolor = true;
    } else {
      this.submitcolor = false;
      this.submitdisplay = true;
    }
  },
  components: { head_ },

};
</script>

<style scoped lang="less">
.userdata {
  padding: 0 0.24rem;
  .title {
    display: flex;
    align-items: center;
    height: 0.88rem;
  }
  span {
    flex: 1;
    text-align: center;
    font-size: 0.34rem;
    font-weight: bolder;
  }
  .inp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.29rem;
    position: relative;
    label {
      font-size: 0.26rem;
      font-weight: bolder;
    }
    input,select {
      width: 5.48rem;
      height: 0.66rem;
      font-size: 0.22rem;
      padding-left: 0.19rem;
      border: 2px solid #e4e4e4;
      border-radius: 0.04rem;
      &::placeholder {
        color: #999;
      }
    }
    .van-icon-eye-o {
      position: absolute;
      top: 0.2rem;
      right: 0.19rem;
    }
    .eye_active {
      color: #2094ff;
    }
  }
  .submit {
    margin-top: 1.29rem;
    text-align: center;
    button {
      width: 3rem;
      height: 1rem;
      color: #999;
      background: #f2f2f2;
      font-size: 0.34rem;
      text-align: center;
      line-height: 1rem;
      border: none;
      outline: none;
    }
    .submit_active {
      background: #43a5ff;
      color: #fff;
    }
  }
}
</style>
